<template>
	<kb-layout>
	<kb-skeleton-index :loading="loading">	
		<view  class="slidebox " :class="{noalarm: !bikan, alarm:bikan}">
			<!-- 视频图片和户型图轮播 -->
		 <kb-group-swipe 
		 :videourl="house.video"
		 :hximgs="house.hximgs"
		 :faceimages="house.slides"></kb-group-swipe>
		  <!-- 圆角背景 -->
		 <cover-view class="coverbg abmt30"> </cover-view>
		 <view class="alarmbg abmt30">
			 <view class="alarmbg__a">
				 <view class="alarm_text">
				<view class="left">
					 <up-text prefixIcon="home-fill" iconStyle="font-size:18px;color:#fff" size="15"  text="必看好房" color="#fff"></up-text>
					
				</view>
				<view class="right u-flex">
					<up-text v-if="house.show_jiaji==1" prefixIcon="checkbox-mark" iconStyle="font-size: 16px;color:#fff"  size="12" text="热门抢手" color="#fff"></up-text>
					<up-text v-if="house.show_you==1" prefixIcon="checkbox-mark" iconStyle="font-size: 16px;color:#fff"  size="12" text="品质小区" color="#fff"></up-text>
					<up-text v-if="house.show_hight==1" prefixIcon="checkbox-mark" iconStyle="font-size: 16px;color:#fff"  size="12" text="店长推荐" color="#fff"></up-text>
					
				</view>				
				</view> 
			 </view>
		 </view>
		 <view  class="topbg abmt30 ">
		 	<view class="topbg__a"></view>
		 </view>
		 <!-- 圆角背景 -->
		</view> 
		<view class="show"  :class="{noalarm: !bikan, alarm:bikan}" >
		
		<sechouse-item v-if="house.zhutype==0" @openurl="openurl" :house="house"></sechouse-item>	
		
		<chuzu-item v-else-if="house.zhutype==2" @openurl="openurl" :house="house"></chuzu-item>
		
		<newhouse-item v-else-if="house.zhutype==3" @openurl="openurl" :house="house"></newhouse-item> 
		<sp-item  v-else-if="house.zhutype==4" @openurl="openurl" :house="house"></sp-item>		
		<cangfang-item  v-else-if="house.zhutype==7" @openurl="openurl" :house="house"></cangfang-item>	
		<CangkuItem v-else-if="house.zhutype==8"  @openurl="openurl" :house="house"></CangkuItem>
		
		<XiezilouItem  v-else-if="house.zhutype==9" @openurl="openurl" :house="house"></XiezilouItem> 
		
		<CangkuItem  v-else  @openurl="openurl" :house="house"></CangkuItem>
		
	</view>
		

	<view class="mapbox" v-if="house.longitude">
		<view class="section-title">
			<u-text text="周边配套" size="20" :bold="true"></u-text>
		 </view>
		 <view style="padding: 10rpx 30rpx; background-color: #fff;">
	<map id="map" :enable-pio="true" scale="14"
	style="width:100%; height: 180px;"
	:markers="markers"
	:longitude="house.longitude"
	:latitude="house.latitude" 
	:show-location="true" 
	></map>	
	</view>
	<!-- 切换显示周边配套 -->
	<view class="zbbox">
		 <u-tabs  :list="zbtype"
		  itemStyle="width:24.5%; height:44px"
		  @click="onZbclick"></u-tabs>
		  
		  <view class="zblist">
			  
			 <view v-for="(item,index ) in zhoubian" :key="index" class="zblist__item">
			  <view class="u-line-1">
				 <u-text prefixIcon="map" size="13" :lines="1" :text="item.title"></u-text> 
			  </view>
			  <view><u-text color="#999"  size="12" :lines="1" :text="'直线'+item._distance+'米'"></u-text></view>
			</view>
			<!--zblist__item 一条信息end -->
			 
		  </view>
	 </view>
	</view> 
	 
	<!-- 小区和小区房源推荐 -->
		<kb-village-item :house="house.village"  :zhutype="house.zhutype"></kb-village-item>
		
		<!-- 同小区房源 -->
		<view class="realhouse" v-if="real_total>0">
			 <view class="section-title">
				<u-text text="同小区房源" size="20" :bold="true"></u-text>
			  </view>
			<view class="show" >
				<kb-realhouse 
				:house="realhouse"
				:total="Math.floor(real_total)+1"
				:rid="house.id"
				:village_name="house.village_name"
				 :zhutype="house.zhutype"></kb-realhouse>
			</view>
		</view>
	 <!-- rent_type是房源类型出售出租 -->
	 <kb-go-pulish :rent_type="house?.zhutype"></kb-go-pulish>
		
	<!-- 联系经纪人	 -->
	<kb-broker-bar :house="house"></kb-broker-bar>
		
	 <kb-footer :color="ee.primayColor" ></kb-footer>
		
	</kb-skeleton-index>	 
</kb-layout>
</template>

<script>
	import util from "/common/tools/utils.js";
	import SechouseItem from "./compents/sechouse.vue";
	import ChuzuItem from "./compents/chuzu.vue";
	import NewhouseItem from "./compents/newhouse.vue";
	import SpItem from "./compents/sp.vue";
	import CangfangItem from "./compents/cangfang.vue";
	import CangkuItem from "./compents/cangku.vue"
	import XiezilouItem from "./compents/xiezilou.vue";
 
	export default {
		components:{
			SechouseItem,
			 ChuzuItem,
			 NewhouseItem,
			SpItem,
			CangfangItem,
			CangkuItem,
			XiezilouItem,			 
		},
		data() {
			return {
				slides:[],
				id:0,
				house:{},
				//bikan: true, 
				markers:[],
				zbtype:[
					{name:'交通'},
					{name:'教育'},
					{name:'医疗'},
					{name:'购物'},
					{name:'休闲'},
				],
				loading: true,
				zhoubian:[],
				realhouse: [],
				real_total:0,
			}
		},
		computed:{
			//显示必看好房的样式
			bikan(){
				return this.house.isjingpin== 1 ? true: false
			}, 
		},
		watch:{
			loading(n){
				if(this.house.mapdata)
				this.zhoubian = this.house.mapdata[ '交通']
			}
		},
		methods: {
			openurl(e){
				if( e.currentTarget.dataset?.url)
					uni.navigateTo({
						url:e.currentTarget.dataset.url
					})
			},
			addHouseMark()
			{
				var point = util.pointToMarker({
					latitude:  this.house.latitude,
					longitude: this.house.longitude, 
					title: this.house.village_name || this.house.quan ||'小区位置',
				}, 1, false);
				this.markers = [point];
				this._mapContext?.addMarkers({
					markers: [point ],
					clear: true,
					complete(res) {
					  
					  console.log('addMarkers',point )
					}
				})
			},
			//切换周边配套的tabs
			onZbclick(e){
				if(this.house.mapdata)
				this.zhoubian = this.house.mapdata[ e.name ]				 
			},
			getRealhouse(){
				util.getModuleData("showhouse/realhouse",{id: this.id})
				.then(ret=>{
					this.realhouse = ret.list;
					this.real_total = ret.total;
				})
			}
		},
		onReady(){
			this._mapContext  = uni.createMapContext('map', this) ;
			
		},
		onLoad(option) {
			this.id = option?.id || 46;
			util.getModuleData("showhouse/index",{id: this.id})
			.then(ret=>{
				this.loading = false;
				this.house = ret;
			 
				this.addHouseMark();//标注到地图marker
				
				
			});
			//获取相关房源
			this.getRealhouse();
			util.getEnsetAdinfo().then(ret => {
			 
				this.slides = [];
				if(ret?.indexslide)
				ret.indexslide.content.map((item, i) => {
					
				})
			
			})
		}
	}
</script>

<style lang="scss">
@import "show.scss";

</style>
